<template>
	<view>
		<view class="regtext">
			<text>注册</text>
		</view>

		<view class="from">
			<u-form :model="userInfo">
				<u-form-item label="账号" prop="userInfo.userName" borderBottom>
					<u--input placeholder="请输入..." clearable v-model="userInfo.userName"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="userInfo.password" borderBottom>
					<u--input type="Password" placeholder="请输入..." v-model="userInfo.password" clearable></u--input>
				</u-form-item>
				<u-form-item>
					<u-button style="margin-top:15rpx ;" type="primary" @click="UserRegHandler">立即注册</u-button>
				</u-form-item>
			</u-form>
		</view>
		<view class="reg">
			<u--text type="success" text="已有账号?去登陆" @click="goLonginBtn"></u--text>
		</view>
		<view class="">
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {
		UserRegAPI,
	} from "@/services/api.js"
	import {
		settoken
	} from "../../utils/tools"
	export default {
		data() {
			return {
				userInfo: {
					userName: "",
					password: "",
					nickName:"",
					avatar:"",
					address:'',
					mobile:''
				},
				list: {
					type: 'error',
					title: '失败主题',
					message: "一弦一柱思华年",
				},
			}
		},
		methods: {
			showToast(params) {
				this.$refs.uToast.show({
					...params,
				})
			},
			goLonginBtn() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			UserRegHandler() {
				UserRegAPI(this.userInfo).then((res) => {
					console.log(res);
					if (res.success) {
						this.list.message = res.errorMessage + "，即将跳转登录"
						this.list.type = "success"
						settoken(res.data)
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}, 500)
					} else {
						this.list.message = "账号已存在"
						this.list.type = "error"
					}
					this.showToast(this.list)
					setTimeout(() => {
						this.userInfo.userName = ""
						this.userInfo.password = ""

					}, 500)
				})
			},
		},
		onLoad() {

		}
	}
</script>

<style>
	.regtext {
		text-align: center;
		font-size: 50rpx;
		margin-bottom: 50rpx;
	}


	.from {
		width: 75%;
		padding-left: 75rpx;
	}

	.reg {
		padding-left: 75rpx;
	}
</style>